<template>
  <div class="w-full flex flex-row items-center cursor-pointer">
    <CircularButtonComponent size="60px" color="#fff" @click="toggleVoice">
      <span
        class="iconfont text-black leading-[60px]"
        :class="showVoice ? 'icon-maikefeng-XDY' : 'icon-maikefengguanbi'"
        style="font-size: 22px"
      />
    </CircularButtonComponent>

    <CircularButtonComponent size="60px" color="#F56C6C" @click="emit('Close')">
      <span class="iconfont icon-guaduan text-white leading-[60px]" style="font-size: 25px" />
    </CircularButtonComponent>

    <CircularButtonComponent v-if="showCamera" size="60px" color="#fff" @click="toggleCamera">
      <span
        class="iconfont text-black leading-[60px]"
        :class="showVideo ? 'icon-24gf-videoCamera' : 'icon-a-Videocameracloseshexiangjiguanbi'"
        style="font-size: 21px"
      />
    </CircularButtonComponent>

    <CircularButtonComponent size="60px" color="#fff">
      <span class="iconfont icon-yangshengqi text-black leading-[60px]" style="font-size: 21px" />
    </CircularButtonComponent>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import CircularButtonComponent from "@/components/CircularButton/index.vue";

interface Props {
  showCamera?: boolean;
}
withDefaults(defineProps<Props>(), {
  showCamera: false,
});

const emit = defineEmits<{
  (e: "Togglecamera"): void;
  (e: "ToggleVoice"): void;
  (e: "Close"): void;
}>();

const showVideo = ref(true);
const showVoice = ref(true);

const toggleCamera = () => {
  showVideo.value = !showVideo.value;
  emit("Togglecamera");
};

const toggleVoice = () => {
  showVoice.value = !showVoice.value;
  emit("ToggleVoice");
};
</script>

<style lang="scss" scoped></style>
